<template>
  <view class="u-p-l-24 u-p-r-24">
    <view v-if="goodsList.length" class="goods-list">
      <view
        @click="$utils.toUrl(`/goods/goods/goods?id=${goods.id}&is_pt=true`)"
        class="goods"
        v-for="goods in goodsList"
        :key="goods.id"
      >
        <image :src="goods.cover_pic" mode="aspectFill" class="leftimg"></image>
        <view class="goods-content">
          <view class="goods-name u-line-2 u-m-b-10">
            {{ goods.name }}
          </view>

          <view class="u-flex">
            <view class="pt-num u-flex">
              <view v-if="goods.party_type == 0">{{ goods.party_size }}人团</view>
              <view v-else>{{ goods.party_goods_count }}件成团</view>
              <view>已拼{{ goods.sale_num }}份</view>
            </view>
          </view>

          <view class="goods-content-bottom">
            <view class="price-box">
              <view>单买 ¥{{ goods.price }}</view>
              <view class="price u-line-1">
                <text style="font-weight: 700; margin-right: 10rpx">
                  ￥
                  <text style="font-size: 36rpx">
                    {{ goods.pt_price | priceBeforeZero }}
                  </text>
                  {{ goods.pt_price | priceAfterZero }}
                </text>
                拼团价
              </view>
            </view>

            <view class="bt" v-if="!hideBt">
              <view
                class="u-line-1"
                style="font-size: 18rpx; width: 150rpx; text-align: center"
                >拼团省{{ goods.diff_price }}元</view
              >
              <view class="u-font-24">参与拼团</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-else>
      <u-empty mode="data"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    goodsList: {
      type: Array,
      default: () => [],
    },
    hideBt: {
      type: Boolean,
      default: false,
    },
  },
  filters: {
    priceBeforeZero(val) {
      if (val.indexOf(".") < 0) return `${val}.`;
      return val.substr(0, val.indexOf("."));
    },
    priceAfterZero(val) {
      if (val.indexOf(".") < 0) return "00";
      return val.substr(val.indexOf("."), val.length);
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-list {
  .goods {
    margin-bottom: 24rpx;
    display: flex;
    background: #fff;
    border-radius: 20rpx;
    padding: 24rpx;
    .leftimg {
      width: 220rpx;
      height: 220rpx;
      border-radius: 10px;
    }
    .goods-content {
      flex: 1;
      width: 0;
      margin-left: 20rpx;
      font-weight: 600;

      .pt-num {
        margin-bottom: 14rpx;
        line-height: 32rpx;
        border: 1px solid #fec9cc;
        border-radius: 6px;
        font-size: 20rpx;
        color: #f0250e;
        > view {
          padding: 0 8rpx;
          background: #fec9cc;
          font-weight: 600;
          color: #f0250e;
          &:nth-last-child(1) {
            background: #fff;
          }
        }
      }
      &-bottom {
        display: flex;
        align-items: center;
        .price-box {
          flex: 1;
          width: 0;
          > view:nth-child(1) {
            position: relative;
            display: inline;
            padding: 0 8rpx;
            background: #ff691b;
            font-size: 20rpx;
            color: #fff;
            margin-bottom: 10rpx;
            border-radius: 6rpx;
            &::after {
              content: "";
              position: absolute;
              left: 20rpx;
              top: 100%;
              border: 10rpx solid #ff691b;
              border-bottom-color: transparent;
              border-left-color: transparent;
              border-right-color: transparent;
            }
          }
          .price {
            color: #f0250e;
            font-size: 24rpx;
          }
        }
        .bt {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 160rpx;
          height: 78rpx;
          padding: 0 10rpx;
          background: linear-gradient(180deg, #f22407 0%, #f84d17 100%);
          border-radius: 20rpx;
          box-shadow: 0rpx 6rpx 12rpx rgba(240, 37, 14, 0.2);
          color: #fff;
        }
      }
    }
  }
}
</style>
